<template>
  <div class="container">
    <div class="loginBody" :style="{ backgroundImage: 'url(' + bg + ')' }">
      <!-- 顶部 -->
      <loginHeader
        :isShowType="isShowType"
        :activeIndex="activeIndex"
      ></loginHeader>
      <!-- 登录 -->
      <div class="loginMain">
        <div class="mapCon" id="mapCon">
          <img :src="mapPng" alt="" class="mapImg" :onerror="errorUrl" />
        </div>
        <!-- 登录 -->
        <div class="loginType">
          <div class="top">
            <ul>
              <li class="left fl supervise">
                <ul class="clearfix">
                  <li class="construction" @click="loginForJC">
                    <span>
                      <i class="icon iconfont iconjianguanbumen"></i>
                      {{ isYinChuanUser() ? '监管部门' : '监管平台' }}
                    </span>
                  </li>
                  <li class="noconstruction" @click="loginForBank">
                    <span>
                      <i class="icon iconfont iconyinhangduan"></i>
                      {{ isYinChuanUser() ? '金融机构' : '银行端' }}
                    </span>
                  </li>
                </ul>
              </li>
              <li class="right fl">
                <ul class="clearfix">
                  <li class="construction" @click="loginForQY">
                    <span>
                      <i class="icon iconfont iconqiyeduan"></i>
                      {{ isYinChuanUser() ? '用人单位' : '企业端' }}
                    </span>
                  </li>
                  <li class="noconstruction" @click="loginForXM">
                    <span>
                      <i
                        :class="
                          isYinChuanUser()
                            ? 'icon iconfont iconyongrenxiangmu'
                            : 'icon iconfont iconxiangmuduan'
                        "
                      ></i>
                      {{ isYinChuanUser() ? '用人项目/公司' : '项目端' }}
                    </span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <ul class="clearfix" v-if="!isYL">
              <template v-if="!isHsUser()">
                <li @click="toWait">
                  <span>
                    <i class="icon iconfont iconxinyonggongshi"></i>
                    信用公示
                  </span>
                </li>
              </template>
              <template v-else>
                <li @click="toCreditPublicity">
                  <span>
                    <i class="icon iconfont iconxinyonggongshi"></i>
                    信用公示
                  </span>
                </li>
              </template>
              <li @click="toComplaintPublicity">
                <span>
                  <i class="icon iconfont icontousugongshi"></i>
                  {{ isYinChuanUser() ? '投诉举报' : '投诉通道' }}
                </span>
              </li>
              <li @click="loginForDT">
                <span>
                  <i class="icon iconfont iconshujujieru"></i>
                  数据接入
                </span>
              </li>
            </ul>
            <ul class="clearfix onlyYL" v-else>
              <template v-if="!isHsUser()">
                <li @click="toWait">
                  <span>
                    <i class="icon iconfont iconxinyonggongshi"></i>
                    信用公示
                  </span>
                </li>
              </template>
              <template v-else>
                <li @click="toCreditPublicity">
                  <span>
                    <i class="icon iconfont iconxinyonggongshi"></i>
                    信用公示
                  </span>
                </li>
              </template>
              <li @click="toComplaintPublicity">
                <span>
                  <i class="icon iconfont icontousugongshi"></i>
                  {{ isYinChuanUser() ? '投诉举报' : '投诉通道' }}
                </span>
              </li>
              <li @click="loginForDT">
                <span>
                  <i class="icon iconfont iconshujujieru"></i>
                  数据接入
                </span>
              </li>
              <li @click="loginForYL">
                <span>
                  <!-- <i class="icon iconfont iconshujujieru"></i> -->
                  夷陵 <br />
                  一家亲
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <loginFooter></loginFooter>
      <div class="people">
        <img :src="peopleBgImg" alt="" v-if="peopleBgImg" class="mapImg" />
      </div>
    </div>
  </div>
</template>

<script>
// import mapJson from "../../../static/mapJson/map";
// import mapJson from "../../../static/json/china";
// import echarts from "echarts";
// import mapJson from "echarts/map/json/china.json";

// import 'echarts/map/js/china.js';

import loginHeader from '@/components/publicCom/loginHeader'
import loginFooter from '@/components/publicCom/loginFooter'
import common from '../../kits/common'

export default {
  name: 'loginFirst',
  components: {
    loginHeader,
    loginFooter,
  },
  data() {
    return {
      isShowType: true,
      activeIndex: '0',
      bg: require('../../../static/img/loginImg/loginBg.jpg'),
      mapPng: require('../../../static/img/loginImg/esMap.png'),
      peopleBgImg: '',
      areaInfo: '',
      pathname: '',
      errorUrl:
        'this.src="' + require('../../../static/img/loginImg/esMap.png') + '"',
      isYL: false, //是否是夷陵区用户
    }
  },
  created() {
    var pathname = window.location.pathname
    //判断是否是夷陵区用户
    this.isYL = this.isYiLingUser()
    var ch = '/'
    this.pathname = pathname.replace(new RegExp(ch, 'g'), '')
    this.getAreaInfo()
    // this.bg = this.$store.state.areaInfoArr.mainBgImg;
    // this.mapPng = this.$store.state.areaInfoArr.mapImg;
    // this.peopleBgImg = this.$store.state.areaInfoArr.peopleBgImg;
  },
  mounted() {},
  methods: {
    getAreaInfo() {
      this.axios({
        method: 'post',
        url: 'api-f/onstage/get',
        data: {
          type: this.pathname,
        },
      }).then(
        (response) => {
          if (!response.data.hasError) {
            this.areaInfo = response.data.result
            this.bg = this.areaInfo.mainBgImg
            this.mapPng = this.areaInfo.mapImg
            this.peopleBgImg = this.areaInfo.peopleBgImg
            this.$store.state.areaInfoArr = response.data.result
            localStorage.setItem(
              'documentTitle',
              response.data.result.mainTopText
            )
            this.$nextTick(function () {
              document.title = localStorage.getItem('documentTitle')
            })
          } else {
          }
        },
        (response) => {}
      )
      // .catch(error => {

      // });
    },
    toWait() {
      this.$message({
        showClose: true,
        message: '功能开发中，敬请期待',
        type: 'warning',
        duration: 1500,
      })
    },
    loginForJC() {
      if (this.isCzUser() || this.isYichunUser()) {
        this.toLoginNext('loginNextCz', 'JC')
      } else {
        this.toLoginNext('loginNext', 'JC')
      }
    },
    loginForQY(selectedName) {
      if (this.isCzUser() || this.isYichunUser()) {
        this.toLoginNext('loginNextCz', 'QY')
      } else {
        this.toLoginNext('loginNext', 'QY')
      }
    },
    loginForBank() {
      if (this.isCzUser() || this.isYichunUser()) {
        this.toLoginNext('loginNextCz', 'BANK')
      } else {
        this.toLoginNext('loginNext', 'BANK')
      }
    },
    loginForXM() {
      if (this.isCzUser() || this.isYichunUser()) {
        this.toLoginNext('loginNextCz', 'XM')
      } else {
        this.toLoginNext('loginNext', 'XM')
      }
    },
    //数据接入
    loginForDT() {
      //是否能进入接口平台
      if (this.isDataAccess()) {
        if (this.isCzUser()) {
          this.toLoginNext('loginNextCz', 'DT')
        } else {
          this.toLoginNext('loginNext', 'DT')
        }
      } else {
        this.toWait()
      }
    },
    //前往夷陵一家亲页面
    loginForYL() {
      window.open(
        'https://manager.folk.zxwave.com/manager/satisfy/list',
        '_blank'
      )
    },
    toLoginNext(name, type) {
      this.$router.push({
        name: name,
        query: {
          type: type,
        },
      })
    },
    toComplaintPublicity() {
      var host = window.location.host
      var pathname = window.location.pathname
      var protocol = document.location.protocol
      //  this.$router.push("/common/complaintPublicity")
      // window.open(
      //     protocol +
      //         "//" +
      //         host +
      //         pathname +
      //         "#/common/complaintPublicity",
      //     "_blank"
      // );
      //区分全国演示投诉通道
      if (this.isYS()) {
        window.open(
          protocol + '//' + host + pathname + '#/common/complaintPublicityYS',
          '_self'
        )
      } else {
        window.open(
          protocol + '//' + host + pathname + '#/common/complaintPublicity',
          '_self'
        )
      }
    },
    toCreditPublicity() {
      var host = window.location.host
      var pathname = window.location.pathname
      var protocol = document.location.protocol
      //  this.$router.push("/common/creditPublicity")
      window.open(
        protocol + '//' + host + pathname + '#/common/newCreditPublicity',
        '_blank'
      )
    },
    //数据接入
    toDataAccess() {
      //目前湖北省所有地区开放
      if (this.isHuBeiUser()) {
        var host = window.location.host
        var pathname = window.location.pathname
        var protocol = document.location.protocol
        window.open(
          protocol + '//' + host + pathname + '#/common/interfaceDocking',
          '_self'
        )
      } else {
        this.toWait()
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  position: relative;
  height: 100%;
  width: 100%;
  .loginBody {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../../../static/img/loginImg/loginBg.jpg') no-repeat;
    // background-repeat: no-repeat;
    background-size: 100% 100%;
    .people {
      position: relative;
      height: 100%;
      width: 20%;
      float: left;
      img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
    }
  }

  // 登录模块
  .loginMain {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    .mapCon {
      height: 100%;
      width: 45.31%;
      margin-right: 6%;
      margin-left: 6.25%;
      float: left;
      img {
        width: 100%;
      }
    }
    .loginType {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 57.56%;
      float: left;
      height: 96%;
      width: 35.22%;
      color: #fff;
      text-align: center;
      font-size: 20px;
      i {
        display: block;
        font-size: 70px;
        margin-bottom: 10px;
      }
      span {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
      }
      .top {
        height: calc(66.66% - 5px);
        ul {
          height: 100%;
          .left {
            width: calc(50% - 5px);
            margin-right: 10px;
            height: 100%;
            li {
              height: calc(50% - 5px);
              position: relative;
              cursor: pointer;
            }
            li:nth-of-type(2) {
              margin-top: 10px;
            }
            .construction {
              background: url('../../../static/img/loginImg/enter1.png')
                no-repeat;
              background-size: 100% 100%;
            }
            .noconstruction {
              background: url('../../../static/img/loginImg/enter3.png')
                no-repeat;
              background-size: 100% 100%;
            }
            background-size: 100% 100%;
            position: relative;
            cursor: pointer;
            i {
              font-size: 70px;
            }
            // }
          }
          .right {
            width: calc(50% - 5px);
            height: 100%;
            li {
              height: calc(50% - 5px);
              position: relative;
              cursor: pointer;
            }
            li:nth-of-type(2) {
              margin-top: 10px;
            }
            .construction {
              background: url('../../../static/img/loginImg/enter2.png')
                no-repeat;
              background-size: 100% 100%;
            }
            .noconstruction {
              background: url('../../../static/img/loginImg/enter4.png')
                no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .bottom {
        height: calc(33.33% - 5px);
        margin-top: 10px;
        i {
          font-size: 60px;
        }
        ul {
          height: 100%;
          li {
            float: left;
            height: 100%;
            width: calc(33.33% - 6.67px);
            background-size: 100% 100%;
            position: relative;
            cursor: pointer;
          }
          li:nth-of-type(1) {
            background: url('../../../static/img/loginImg/4.png') no-repeat;
            background-size: 100% 100%;
          }
          li:nth-of-type(2) {
            margin: 0 10px;
            background: url('../../../static/img/loginImg/5.png') no-repeat;
            background-size: 100% 100%;
          }
          li:nth-of-type(3) {
            background: url('../../../static/img/loginImg/6.png') no-repeat;
            background-size: 100% 100%;
          }
          li:nth-of-type(4) {
            background: url('../../../static/img/loginImg/yl.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .onlyYL li {
          width: calc(25% - 7.5px);
          &:nth-child(3) {
            margin-right: 10px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 1280px) and (max-height: 1024px) {
  .container .loginMain .loginType span {
    font-size: 16px;
  }
  .bottom i,
  .top i,
  .left i {
    font-size: 40px !important;
  }
}

@media only screen and (max-height: 768px) {
  .container .loginMain .loginType span {
    font-size: 16px;
  }
  .bottom i,
  .top i,
  .left i {
    font-size: 40px !important;
  }
}
</style>
